<template>
  <el-menu :default-active="activeIndex" :text-color="variables.topText" :active-text-color="variables.topActiveText" class="el-menu-demo" mode="horizontal">
    <el-menu-item v-for="(item, index) in topNavList" :key="item.objectId" :index="String(index)" class="aq-text-size-medium" @click="handleLink(item, index)">{{ item.name }}</el-menu-item>
  </el-menu>
</template>

<script>
import variables from '@/styles/variables.scss'
import store from '@/store';
import { mapGetters } from 'vuex'
import { setApplicationId, getTopNavList, setApplicationIndex, getApplicationIndex } from '@/utils/auth'
export default {
  data() {
    return {
      activeIndex: getApplicationIndex() ? getApplicationIndex() : '0',
      topNavList: getTopNavList()
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  created() {
    this.topNavList = JSON.parse(this.topNavList);
  },
  methods: {
    handleLink(item, index) {
      setApplicationId(item.objectId);
      setApplicationIndex(index);
      if (getApplicationIndex()) {
        store.dispatch('user/getLeftMenus')
      }
      // store.commit('SET_APPLICATIONID', item.objectId);
      if (item.pageUrl === '/dashboard') {
        this.$router.push({ path: item.pageUrl })
        store.dispatch('closeSideBar', { withoutAnimation: false })
      } else {
        // store.dispatch('openSideBar', { withoutAnimation: false })
        store.dispatch('user/getLeftMenus')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .aq-text-size-medium {
    height: 50px;
    line-height: 50px;
  }
  .el-menu-item {
    padding: 0px 30px;
  }
</style>
